Learn React In 30 Minues, by Kyle
verify nodejs is installed:
sudo apt install nodejs>
sudo apt install npm
npx create-react-app .
npm start - Starts the development server.
npm run build - Bundles the app into static files for production.
take a look at the <div id="root"></div> line index.html
react generates html and puts it inside this root div.
The meat and potatoes of the application is inside the src folder where we have our style sheets js test files and logos etc.
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
ReactDOM.render says to render the content we pass in <App /> at a certain element and in this case it is the <div id="root"></div> element.
If we go into the application component App.js we can see that it is currently rendering basic boiler plate code that comes when you create a basic react application.
run npm start in the terminal to see what this basic application looks like.
now that we have removed the unnecessary code for our application we can start building our "To do list" application inside App.js.
The first thing we are going to do is write the HTML for our application.
We are going to create a component called <TodoList /> and return it:
return (
<TodoList />
)
Take note that <TodoList /> is not normal valid HTML but is acutually JSX which is kind of like reacts version of HTML.
JSX allows you to embed components inside other components
ES7 React/Redux/GraphQL/React-Native snippets allows us to simply type rfc and it will create a function component for us inside react.