A great article is available here, with details on how to build a quick and dirty version of React.
If you’re newish to web-dev you might have a little trouble knowing where to start. The first code changes you will make are to the index.js file located in the src folder create-react-app makes for you.
- node.js installed and working
- create-react-app installed and working
- A basic understanding of:
To get the ball rolling you’ll need to make sure you have create-react-app installed globally.
npm install create-react-app -g
Next navigate to the folder you’d like your new React app to exist in, and run create-react-app.
Now navigate into that directory, and get the app running with npm.
It’s also a good idea at this point to pop open a new terminal, navigate it to your project directory, and open the directory in your favorite code editor.
Next take a look at the file in question, which resides in ./src/index.js. Here it is in an unmodified state.
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();
You’ll want it to look like this, and you’re off to the races.
import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import * as serviceWorker from "./serviceWorker"; const element = <h1 title="foo">Hello</h1>; const container = document.getElementById("root"); ReactDOM.render(element, container); serviceWorker.unregister();
Congrats, you’ve started ‘Step 0’ of the tutorial.