A stateless pure function const App = () => ( My App ) export default App Pure functions have the bonus of being really nice to test, they always have predictable returns, are more performant and are written in an immutable functional style. A stateful React component class App extends Component export default AppĪ full-on React component gives you access to all the lifecycle methods and the ability to store and mutate the state but it’s not really the nicest way to write our code if we can avoid it. It wants us to write it as a stateless pure function as opposed to the stateful React component it is now. Open up the src/App.js and we should see eslint complain about the App component. We can make good use of our new found eslint-powers. Let’s do a little spring cleaning with our app before we proceed. Let’s run the tests as a sanity check to make sure everything has gone according to plan. Herein lies part of the magic, it’s simply a package that has all the most essential packages as its dependents and provides scripts to run common tasks. If you have a look in the package.json you will notice that the only production dependencies are the react library and react-dom to render it, and the only dev dependency is something called react-scripts. Then let’s change in to that directory and install the node packages we need: cd my-react-todolist npm install This will create a react app in the my-react-todolist/ folder relative to wherever we are. In the command line let’s go to the parent directory of where we want to create our app then run the following: Then install the create-react-app package globally: Make sure you have the latest node and npm installed. Files of note will be the package.json and contents of the config/ and scripts/ folder. You can have a look at what create-react-app actually does behind the scenes in this repo, all I’ve done is scaffolded an app and then run npm eject to expose all the packages, configs and scripts. Even for a production app, my feeling at the moment is that it’s better to use create-react-app and then make the few changes you may want, it’s far more efficient.
0 kommentar(er)
