![]() ![]() The contents of the src directory will vary greatly from project to project and team to team. Instead, the src directory is where you'll do the vast majority of your React development. Other than making sure certain static assets or global scripts are available to index.html, you don't really spend much time working in the public directory. Where in our last blog post we created an index.js file in the same directory as index.html and built our React App in there, for a more industry-standard approach, index.js and all of your component, logic, and style files will live in a src directory. When you run these scripts, Webpack will also keep an eye on changes that you make in the src directory, which is where you'll actually create and manage your React application files. These are omitted here because Webpack will include them when you run the development or build scripts. What's missing here (that we saw in the last blog post) are the react and react-dom library tags. If you have a font directory that you want access to, you can drop that into the public directory. ![]() If you need to load fonts or Google Analytics through a series of tags, then those tags can be placed in the index.html file. This HTML file serves as the sort of root template of your web application, and the public directory serves as the root directory. This should look familiar by now it's where the actual React application will be placed. This produces a structure that may look something like: When you use a React-based static site generator, like Gatsby, the generation/build step will compile your application down to static HTML, CSS, and JavaScript files and write those files to your public directory. These are static assets that the final application will use, but that don't really need to be generated by Webpack. The public directory is where public-facing assets live. Typically under the hood React runs Webpack to process your files, transpiling JSX down to the bundled JavaScript that gets embedded into the actual application into the index.html file, which is found within the public directory. This will define dependencies (like react and react-dom as covered in the previous post), and scripts to actually run the app. package.jsonĪs with just about any other modern JavaScript-driven programming environment, the entry point to your application is package.json. gitignore, but I want to focus on the three things that serve as the sort of entry point for your React app: package.json, the public directory, and the src directory. You'll get the usual web development stuff – a README.md, a node_modules directory, and a. This is a pretty bare-bones example, but it's essentially a simplified version of what you get out of the box from Create React App.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |