Top Tweets for #AskaSoftwareDeveloper
Do you know what #instructions are executing the #programs running on your #mobile #phones or #computer? #real #Software #developer could read code for you.
#askasoftwaredeveloper #ffs #symbol #nem
Save the date for the maiden edition of #CraftTurfPodCastSeries in continuation of our community building campaign #AskASoftwareDeveloper.
You will be listening to our guest @eneroakerele as he answers questions around the topic: "HOW TO BUILD A LARGE SCALE WEB APPLICATION"
We are happy to welcome back @eneroakerele for this month's edition of #AskaSoftwareDeveloper. He will be sharing great insights and answering questions around the topic
" How to structure a large scale web application"
#CraftTurf #100DaysOfCode #MondayMotivation
A big thank you to @simdi_damian for the time and efforts put into this. We hope to have you as a quest again very soon. 👏👏👏👏
#AskaSoftwareDeveloper
@craftturf @webpack @babeljs React is not opinionated, so it would be nice to embrace best practices. Hope this thread gives you some ideas on how you might approach large React apps, but you should take my points and fine-tune them to suit your preference. #AskaSoftwareDeveloper
@threadreaderapp unroll
@craftturf @webpack @babeljs index.js would contain the code that creates the main reducer, probably using combineReducers from Redux to do so, and in user.js and questions.js where each contains bits of code related to each other. #AskaSoftwareDeveloper
@craftturf @webpack @babeljs In the redux folder, you can have this structure:
- index.js
- user.js
- questions.js
...
#AskaSoftwareDeveloper
@craftturf @webpack @babeljs One thing we strive for is to have many small React components, rather than fewer, larger components. A good guide for when your component is getting too big is the size of the render function. #AskaSoftwareDeveloper
@craftturf @webpack @babeljs Following the previous structure, we stick to a convention of one React component per file, and the component should always be the default export. This way you can use the React context api to get data from the store. #AskaSoftwareDeveloper
@craftturf @webpack @babeljs In the src folder, you can have this structure:
- components => React components
- pages => React components to wrap one or more components
- redux => state management scripts
- routes => All routes
- utils => utility files.
#AskaSoftwareDeveloper
@eneroakerele @craftturf @webpack @babeljs I generally like to separate them that way, like anything for the client will be in the client folder and anything for the server will be in the server. If I need any file or component that will be shared, I will put them in a shared folder. #AskaSoftwareDeveloper
@craftturf @webpack @babeljs To keep things structured, it's nice to place app code in a folder called src. This folder will contain only code that will end up in your final bundle.
- src => code here
- webpack => webpack configs
- scripts => any build scripts
- tests => tests scripts
#AskaSoftwareDeveloper
@craftturf @webpack @babeljs The default value for resolve.modules is ['node_modules'], so you have to add it too, else @webpack won’t be able to import files that you’ve installed with npm or yarn. #AskaSoftwareDeveloper
@craftturf @webpack @babeljs // This is a basic webpack config to help resolve path and extensions
{
resolve: {
modules: ['node_modules', path.resolve(__dirname, './src')],
extensions: ['.js', '.json', '.jsx'],
}
}
#AskaSoftwareDeveloper
@craftturf @webpack @babeljs This is also where you need to tell @webpack
about any other file extensions that you might be using, such as .jsx, .js #AskaSoftwareDeveloper
@craftturf @webpack @babeljs You can tell @webpack
to always look in a specific directory for files, which lets you define a base folder that all your imports can become relative to. I always put my code in an src directory. @webpack
will always look in that directory. #AskaSoftwareDeveloper
@craftturf @webpack @babeljs One thing that can be frustrating when working on a large project with a nested file structure is figuring out the relative paths between files. This is where @webpack
comes in. #AskaSoftwareDeveloper
@craftturf @simdi_damian What's the business benefits of running React with SSR? #AskaSoftwareDeveloper
@craftturf Generally, I use @webpack to bundle my code, @babeljs to compile my code, and webpack-dev-server to serve my app locally. I also use the ES2015 module syntax through Babel to import and export dependencies. #AskaSoftwareDeveloper
@craftturf ReactDOM.render(
<div>
<h1>Hello, world!</h1>,<br>
<div>My name is Chisimdi, I will be talking about "How to Properly Structure a #ReactJS Application for Production".</div>
</div>,
document.getElementById('root')
); #AskaSoftwareDeveloper
Trends for you
Most Popular Users
Elon Musk 
@elonmusk
240.2M followers
Barack Obama
@barackobama
119.3M followers
Donald J. Trump
@realdonaldtrump
111.6M followers
Cristiano Ronaldo
@cristiano
109.5M followers
Narendra Modi
@narendramodi
107M followers
Rihanna
@rihanna
97.4M followers
NASA
@nasa
92.1M followers
Justin Bieber
@justinbieber
90.7M followers
KATY PERRY
@katyperry
87.1M followers
Taylor Swift
@taylorswift13
80.9M followers
Lady Gaga
@ladygaga
72.5M followers
Kim Kardashian
@kimkardashian
69.5M followers
Virat Kohli
@imvkohli
69M followers
YouTube
@youtube
68.6M followers
Bill Gates
@billgates
63.6M followers
The Ellen Show
@theellenshow
62.5M followers
CNN
@cnn
61.9M followers
Neymar Jr
@neymarjr
61.6M followers
X
@x
60.9M followers
Selena Gomez
@selenagomez
60.2M followers