create a react app quickly from scratch
first, you'll have nodejs already installed and npm v5.2+ installed so you have npx installed too.
next, go to the following github repo to follow the instructions: https://github.com/facebook/create-react-app
on a Mac, from a terminal window type:
$ mkdir CODE
$ cd CODE
$ npx create-react-app my-app
this will build everything you need to get going.
$ cd my-app
$ npm start
This will start the app and open a web-browser window.
In the terminal window, you'll see it execute the following:
In a web browser you'll see:
As it states, if you look in the folder structure, there is an App.js within the /src folder.
$ cd src
$ nano App.js
you can now modify the file as-is and with the terminal window still running, you'll see the changes are applied immediately in the web browser.
Checkout the official website for more info.
Modify the App.js to be like so:
$ nano App.js
You will then see the H1 and the text output like so:
To get the CSS to work, do the following:
Then you'll see the center text is applied:
Although using this syntax of React.createElement() is rather cumbersome and surely there is a better way...yep, there sure is, the way we had it in the first place! The code above is what the end result will get built to in the end, but it's simpler/easier to use the straight HTML like we had before.
The key to remember is that although we have what looks like HTML in the code above, it is actually called JSX and it gets compiled to the version before it for output, so we must stick to the rules to make sure we get the correct compiled output.
zzz
next, go to the following github repo to follow the instructions: https://github.com/facebook/create-react-app
on a Mac, from a terminal window type:
$ mkdir CODE
$ cd CODE
$ npx create-react-app my-app
npx: installed 91 in 108.154s
Creating a new React app in /Users/tony/Documents/IBM/GBS/LAND AI/CODE/my-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
yarn add v1.19.1
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 7 new dependencies.
info Direct dependencies
├─ react-dom@16.12.0
├─ react-scripts@3.2.0
└─ react@16.12.0
info All dependencies
├─ react-app-polyfill@1.0.4
├─ react-dev-utils@9.1.0
├─ react-dom@16.12.0
├─ react-error-overlay@6.0.3
├─ react-scripts@3.2.0
├─ react@16.12.0
└─ scheduler@0.18.0
✨ Done in 262.37s.
Initialized a git repository.
Success! Created my-app at /Users/tony/Documents/IBM/GBS/LAND AI/CODE/my-app
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd my-app
yarn start
Happy hacking!
Tonys-MacBook-Pro-2:CODE tony$
this will build everything you need to get going.
$ cd my-app
$ npm start
This will start the app and open a web-browser window.
In the terminal window, you'll see it execute the following:
Compiled successfully!
You can now view my-app in the browser.
Local: http://localhost:3000/
On Your Network: http://172.20.31.73:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.
In a web browser you'll see:
As it states, if you look in the folder structure, there is an App.js within the /src folder.
$ cd src
$ nano App.js
you can now modify the file as-is and with the terminal window still running, you'll see the changes are applied immediately in the web browser.
Checkout the official website for more info.
Modify the App.js to be like so:
$ nano App.js
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return React.createElement('div', null, React.createElement('h1', null, 'Hi I am a test app'));
}
}
export default App;
You will then see the H1 and the text output like so:
To get the CSS to work, do the following:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return React.createElement('div', {className:'App'}, React.createElement('h1', null, 'Hi I am a test app'));
}
}
export default App;
Then you'll see the center text is applied:
Although using this syntax of React.createElement() is rather cumbersome and surely there is a better way...yep, there sure is, the way we had it in the first place! The code above is what the end result will get built to in the end, but it's simpler/easier to use the straight HTML like we had before.
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<h1>I am the new old way</h1>
</div>
);
}
}
export default App;
The key to remember is that although we have what looks like HTML in the code above, it is actually called JSX and it gets compiled to the version before it for output, so we must stick to the rules to make sure we get the correct compiled output.
zzz
Comments
Post a Comment