Create You Own React

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.

Prerequisites:

  • node.js installed and working
  • create-react-app installed and working
  • A basic understanding of:
    • HTML
    • Javascript
    • Node
    • React

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.

create-react-app build_fake_react

Now navigate into that directory, and get the app running with npm.

npm start

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.

code .

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.

Happy Hacking!

Author: Jeremy Whitman

A former standup comedian trying to find the best way to communicate now.

Leave a Reply