This content originally appeared on DEV Community and was authored by Eric Chapman
After my Javascript series: https://dev.to/rickavmaniac/javascript-my-learning-journey-part-1-what-is-javascript-role-and-use-case-49a3
I am now ready to begin my React learning journey :)
Click follow if you want to miss nothing. I will publish here on Dev.to what I learn from my React course the day before.
Without further ado here is a summary of my notes for day 5.
Create React App
Up until now we use React CDN link. But like I say to build real world app and go to production we have to install all those tools and libraries into our machine.
This installation process it complicated and time consuming, that's why React introduce a tool to do that automatically: The Create React App command.
Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.
To use this command we need to install node.js (https://nodejs.org/en/)
Once node.js is install we can now go into the terminal inside our project folder and execute:
npx create-react-app my-app-name
The command will install React, ReactDOM, ReactScript and many more dependencies.
Once install, to launch to new project execute:
cd my-app
yarn start
To stop the server you can hit ctrl-c
If you open your code editor you will see the new file structure
In the public folder we have an index.html that is the entry point of our app. In that file there is a div with an id="root". That div is the container for our React Components.
That link is specified in the index.js file. The ReactDOM.render() will render our React components
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
The welcome screen you saw when you launch the application was the code include in the App component.
To see the App component you can open App.js. There we have a function React Component.
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
This code has been create by the create-react-app command. It will be overrite soon with your code.
Conclusion
That's it for today. tomorrow the journey continue... If you want to be sure to miss nothing click follow me!
This content originally appeared on DEV Community and was authored by Eric Chapman
Eric Chapman | Sciencx (2021-03-11T12:41:23+00:00) React 101 – part 5: Create React App. Retrieved from https://www.scien.cx/2021/03/11/react-101-part-5-create-react-app/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.